/**
 * @file themed/bp01/css/style.less
 */

@green: #468966;

@tray_height: 30px;
@tray_sel_height: 44px;

@footer_height: 39px;
@footer_vpadding: 8px;

body {
  background: transparent url('../img/bg.png') repeat-x 0 0;
}

#flashMessage,
#authMessage {
  z-index: 10;
  position: absolute;
  top: 0;
  margin: 0 !important;
  padding: 0;
  width: 100% !important;
  line-height: 1.5em;
  background: url('../img/close.png') no-repeat right center;
}

a, a:visited {
  color: @green;
}

#main {
  background: transparent url('../img/main-bg.png') repeat-y 0 0;
}

#inner {
  background: transparent url('../img/inner-bg.png') no-repeat 0 0;
}

div#flashMessage.message {
  margin: 16px 110px 0 110px;
  width: 60%;
}

#header {
  margin: 10px auto;
  padding: 37px 0 0 0;
  position: relative;
  height: auto;

  #tray {
    background: transparent;
    height: auto;
    width: auto;
    position: absolute;
    top: 66px;
    right: 280px;

    li {
      margin-top: @tray_sel_height - @tray_height;
      display: block;
      float: left;
      margin-right: 10px;
      padding: 0;
      height: @tray_height;
      background: transparent url('../img/tab-bg.png') repeat-x 0 0;
      
      a {
        width: 100%;
        height: @tray_height;
        display: block;
        padding: 0;
        background: transparent url('../img/tab-left.png') no-repeat top left;

        span {
          height: @tray_height;
          display: block;
          padding: 5px 20px;
          background: transparent url('../img/tab-right.png') no-repeat top right;
          font-size: 18px;
        } // span
      } // a 
    } // li
    li#tray-active {
      margin-top: 0;
      height: @tray_sel_height;
      background-image: url('../img/tab-sel-bg.png');
      
      a {
        height: @tray_sel_height;
        background-image: url('../img/tab-sel-left.png');

        span {
          height: @tray_sel_height;
          padding-top: 10px;
          background-image: url('../img/tab-sel-right.png');
          font-size: 24px;
        } // span
      } // a 
    } // li
  } // #tray

  #usertop {
    position: absolute;
    top: 34px;
    right: 170px;
    color: white;
    
    a {
      color: white;
    }
  }

  #nav {
    position: absolute;
    top: 84px;
    right: 170px;
    color: white;

    span {
      margin: 0;
    }
    
    span.sep {
      margin: 0 8px;
    }

    a {
      color: white;
    }
  }
} // #header

#logo img {
  margin-top: 4px;
  margin-left: 37px;
}

div#cols2,
div#col-top,
div#col-bottom,
div#cols2-top,
div#cols2-bottom,
div#cols3-top,
div#cols3-bottom {
  width: auto;
  height: auto;
  background: transparent;
}

div#cols2 {
  margin-left: 20px;
  
  #col-left { 
    width: 452px;
    margin-top: 8px;
    margin-bottom: 20px;
    padding-right: 0;
    
    .title {
      margin-top: 16px;
      background: none;
      color: @green;
      font-size: 26px;
    }
  }
}

div#col {
  margin-left: 20px;
    
  h2#slogan {
    color: @green;
  }

  #col-text {
    width: 480px;
    margin-right: 130px;
  }
}

.col-text {
  border: none;
}

div#col-top,
div#col-bottom,
div#cols2-top,
div#cols2-bottom,
div#cols3-top,
div#cols3-bottom {
  display: none;
}

div#col,
h2#slogan span,
div#col-browser,
div#ribbon {
  background: transparent;
}

#cols2 #col-left {
  width: 460px;
  padding: 0 20px;
}

#PointAddForm textarea {
  width: 280px !important;
}

#cols3 { 
  background: none;
  padding-left: 20px;
  
  .col {
    width: 260px;

    h3 {
      background-image: url('../img/design/cols3-title.gif') !important;
    }
  }
  .col.last {
    .col-text {
      margin-right: 10px;
    }
  }
}

div#footer {
  background: transparent url('../img/footer-bg.png') no-repeat 0 0;
  p.f-right {
    display: none;
  }
}

#tabs {
  background: transparent;
  height: 41px;
  width: 456px;
  top: 66px;
  right: 280px;
  background: transparent url('../img/subnav-bg.png') no-repeat 0 0;

  li {
    display: block;
    margin: 0;
    padding: 0;
    background: transparent url('../img/subnav-sep-bg.png') no-repeat top right;
    
    a {
      margin: 0 10px;
      color: white;
      border: none;
      display: block;
      padding: 2px 0;

      :hover {
        background: transparent url('../img/subnav-sel-bg.png') repeat-x top left;
        // font-weight: bold;
      }
      
      span {
        display: block;
        padding: 5px 20px;
        //background: transparent url('../img/subnav-right.png') no-repeat top right;
        font-size: 18px;
      } // span
    } // a 
  } // li

  li.active-tab a {
    background: transparent url('../img/subnav-sel-bg.png') repeat-x top left;
    // font-weight: bold;
  }
} // tabs

hr.tabs {
  display: none;
}

#col-left {
  #badge {
    margin: 10px 0 0 10px;
  }
}

#cols2 #col-right {
  margin: 10px 150px 20px 0;
  padding: 0;

  background: transparent url('../img/vignette-bg.png') repeat-y top left;

  h4 {
    line-height: 1.1em;
    color: white;
    font-size: 20px;
    padding: 6px 16px;
    background: transparent url('../img/vignette-top.png') no-repeat top left;
  }

  div.edit {
    margin: 10px 30px 0 0;
    
    a {
      color: white;
    }
    
    h4 {
      color: black;
      background: none;
      padding: 0;
    }
  }

  div.box {
    background: transparent url('../img/vignette-bottom.png') no-repeat bottom left;

    .col-right-img {
      margin-left: 20px;
      margin-bottom: 20px;
    }

    .col-right-text {
      margin-right: 40px;
      width: 132px;
    } 
    
    ul.ul-list {
      margin-left: 16px;
    }
  }
} // #cols2 #col-right

#cols2 form #col-right {
  margin-right: 170px;
  background: none;
}

#btns {
  margin-top: 10px;
}

#PointAddForm #col-right {
  margin-right: 20px;
}

div#footer {
  padding: @footer_vpadding 20px;
  height: @footer_height - 2 * @footer_vpadding;
  color: white;
  
  a { 
    color: white;
  }
  
  p {
    margin: 0 20px;
  }
}
